<template>
	<view class="product-cus-config">
		<!-- 下载配置模板 -->
		<view class="download-template-box">
			<view class="import-cus-product-title">
				<text class="left-text">产品配置模板</text>
				<text class="right-text" @click.stop="downloadTemplate">点击下载</text>
			</view>
		</view>

		<view class="import-cus-product-box">
			<view class="import-cus-product-title">
				<text class="left-text">导入数据</text>
				<text class="right-text" @click.stop="clearImportData">清空已导入数据</text>
			</view>
			<view class="import-cus-product-content">
				<view class="upload-box" v-if="isUploadShow" @click.stop="uploadFiles">
					<van-icon class="upload-icon" name="back-top" />
					<view class="upload-text">上传excel数据</view>
				</view>

				<view class="files-box" v-else>
					<van-icon class="file-icon" name="description" />
					<view class="file-text">{{uploadFilesData.name ? uploadFilesData.name : "-"}}</view>
					<van-icon class="delete-upload-icon" name="close" @click.stop="deleteUploadFile" />
				</view>
			</view>

			<view class="upload-btn" v-show="isUploadBtnShow" @click.stop="submitUploadFiles">开始上传</view>
		</view>

		<view class="import-record-box">
			<view class="import-cus-product-title">导入记录</view>
			<view class="import-record-list">
				<view class="dynamic-item" v-for="(item, index) in importRecordList" :key="index">
					<view class="dynamic-item-date-person">
						<view class="dynamic-item-date">{{item.insertDate}}</view>
						<view class="dynamic-item-person">{{item.inputer}}</view>
					</view>
					<view class="dynamic-item-icon-text">
						<van-icon class="label-icon" name="comment" />
						<view class="dynamic-item-text">{{item.typeRemark}}</view>
					</view>
				</view>
			</view>
			<uni-load-more class="loadingMore" :status="loadStatus" v-show="isLoadMore" :content-text="contentText"
				@clickLoadMore="handleDynamicLoadMore" />
		</view>
		<view class="height"></view>
	</view>
</template>

<script>
	import apiRqs from "@/api/api-request.js";
	export default {
		data() {
			return {
				isUploadShow: true,
				isUploadBtnShow: false,
				loadStatus: 'more',
				contentText: {
					contentdown: '查看更多',
					contentrefresh: '加载中',
					contentnomore: '没有更多'
				},
				isLoadMore: false,
				uploadFilesData: {},
				paged: {
					"pageSize": 5,
					"pageIndex": 1,
					"orderBy": "asc"
				},
				importRecordList: [],
			}
		},
		onShow() {

		},
		onLoad() {
			this.handleGetImportRecord();
		},
		methods: {
			// 上传文件 (将打开微信会话列表，从微信会话中选取文件)
			uploadFiles() {
				console.log('点击了上传');
				var that = this;
				wx.chooseMessageFile({
					count: 1,
					type: 'file',
					success(res) {
						const tempFile = res.tempFiles[0];
						if (tempFile) {
							let suffix = tempFile.path.substring(tempFile.path.length - 4, tempFile.path.length);
							if (suffix == 'xlsx' || suffix == 'xls') {
								that.isUploadShow = false;
								that.isUploadBtnShow = true;
								that.uploadFilesData = tempFile;
							} else {
								getApp().showToast("请上传excel格式文件");
								return false;
							}
						}
					}
				})
			},
			// 删除已选文件
			deleteUploadFile() {
				this.isUploadShow = true;
				this.isUploadBtnShow = false;
				this.uploadFilesData = {};
			},
			// 开始上传
			submitUploadFiles() {
				const loginInfo = uni.getStorageSync("loginInfo");
				let uploadFilesData = this.uploadFilesData;
				getApp().showLoading();
				var that = this;
				let p1 = new Promise((resolve) => {
					uni.uploadFile({
						url: getApp().globalData.websiteUrl +
							"/api/v1/FileUpload",
						filePath: uploadFilesData.path,
						name: 'file',
						header: {
							'Authorization': ('Bearer ' + loginInfo.token) ||
								''
						},
						formData: {
							'fileType': 'UserDefinedProducts'
						},
						success: (uploadFileRes) => {
							let res = JSON.parse(uploadFileRes.data);
							console.log("上传结果", res);
							let filePath = res.data[0].filePath;
							let newFilePath = filePath.replace(/\\/g, "/");
							// let imgName = `${getApp().globalData.websiteUrl}${newFilePath}/${res.data[0].fileName}`;
							let imgName = `${filePath}/${res.data[0].fileName}`;
							resolve(imgName);
						}
					});
				})
				p1.then((excel) => {

					let rqsData = {
						"type": "UserDefinedProducts",
						"file": excel,
					};
					console.log('上传的接口请求字段', rqsData);
					apiRqs._importCusProduct(rqsData).then((res) => {
						uni.hideLoading();
						console.log("导入结果", res);
						if (res.code == 200) {
							getApp().showToast(res.data);
							that.isUploadShow = true;
							that.isUploadBtnShow = false;
							that.uploadFilesData = {};
							apiRqs._getCusProductRecord({
								"pageSize": 5,
								"pageIndex": 1,
								"orderBy": "asc"
							}).then((res) => {
								if (res.code == 200) {
									let newData = JSON.parse(JSON.stringify(res.data.data));
									if (newData.length > 0) {
										let prevNewData = newData[0];
										that.importRecordList.unshift(prevNewData);
									}
								}
							})
						} else {
							getApp().showToast(res.msg);
						}

					})
				})
			},
			// 获取导入自定义产品记录列表
			handleGetImportRecord(type) {
				let paged = this.paged;
				var that = this;
				getApp().showLoading();
				apiRqs._getCusProductRecord(paged).then((res) => {
					uni.hideLoading();
					console.log("导入记录列表", res);
					let newData = JSON.parse(JSON.stringify(res.data.data));
					if (res.code == 200) {
						that.isLoadMore = true;
						if (newData.length > 0) {
							if (newData.length < that.paged.pageSize) {
								that.loadStatus = 'nomore';
							} else {
								that.loadStatus = 'more';
							}
						} else {
							that.loadStatus = 'nomore';
						}
						if (type == 'loadMore') {
							that.importRecordList = that.importRecordList.concat(newData);
						} else {
							that.importRecordList = newData;
						}
					} else {
						that.isLoadMore = false;
					}
				})
			},
			// 导入记录加载更多
			handleDynamicLoadMore() {
				if (this.loadStatus == 'more') {
					this.paged.pageIndex += 1;
					this.handleGetImportRecord('loadMore');
				}
			},
			// 清空已导入数据
			clearImportData() {
				var that = this;
				uni.showModal({
					title: "提示",
					content: "确认清空已导入的自定义产品数据吗？(清空后不可恢复)",
					confirmText: "确认",
					confirmColor: "#008aff",
					cancelText: "取消",
					cancelColor: "#999",
					success(res) {
						if (res.confirm) {
							getApp().showLoading();
							apiRqs._clearImportProductData().then((res) => {
								uni.hideLoading();
								console.log('清空结果', res);
								if (res.code == 200) {
									getApp().showToast("清空成功");
									apiRqs._getCusProductRecord({
										"pageSize": 5,
										"pageIndex": 1,
										"orderBy": "asc"
									}).then((res) => {
										if (res.code == 200) {
											let newData = JSON.parse(JSON.stringify(res.data
												.data));
											if (newData.length > 0) {
												let prevNewData = newData[0];
												that.importRecordList.unshift(prevNewData);
											}
										}
									})
								} else {
									getApp().showToast(res.msg);
									return false;
								}
							})
						}
					}
				})
			},
			// 下载产品配置模板
			downloadTemplate() {
				uni.navigateTo({
					url: "/packageD/data-download/download?type=product"
				})
			},
		},
	}
</script>

<style lang="less">
	page {
		background-color: #2A2D3A;
	}

	.product-cus-config {
		.height {
			height: 40px;
		}

		.download-template-box {
			background: linear-gradient(to right, rgb(79, 82, 91), rgb(42, 45, 57));
			margin: 20px;
			border-radius: 4px;
			padding: 12px 15px 15px 15px;

			.import-cus-product-title {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.left-text {
					font-size: 16px;
					color: #fff;
					font-weight: 500;
				}

				.right-text {
					font-size: 12px;
					color: #66A3FD;
					font-weight: unset;
				}
			}
		}

		.import-cus-product-box {
			background: linear-gradient(to right, rgb(79, 82, 91), rgb(42, 45, 57));
			margin: 20px;
			border-radius: 4px;
			padding: 12px 15px 15px 15px;

			.import-cus-product-title {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.left-text {
					font-size: 16px;
					color: #fff;
					font-weight: 500;
				}

				.right-text {
					font-size: 12px;
					color: #66A3FD;
					font-weight: unset;
				}
			}

			.import-cus-product-content {
				border: 1px solid rgba(255, 255, 255, 0.18);
				margin-top: 12px;
				border-radius: 4px;

				.upload-box {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					padding: 15px 0;

					.upload-icon {
						font-size: 28px;
						color: rgba(255, 255, 255, 0.4);
					}

					.upload-text {
						font-size: 12px;
						color: rgba(255, 255, 255, 0.4);
						margin-top: 5px;
					}
				}

				.files-box {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					padding: 15px 0;
					position: relative;

					.file-icon {
						font-size: 28px;
						color: rgba(255, 255, 255, 0.4);
					}

					.file-text {
						font-size: 12px;
						color: rgba(255, 255, 255, 0.4);
						margin-top: 5px;
					}

					.delete-upload-icon {
						position: absolute;
						right: 10px;
						top: 6px;
						font-size: 18px;
						color: #fff;
					}
				}

			}

			.upload-btn {
				width: 100%;
				text-align: center;
				color: #66A3FD;
				margin-top: 15px;
				font-size: 13px;
			}
		}

		.import-record-box {
			margin: 20px;

			.loadingMore {
				.uni-load-more {
					margin-top: 10px;
				}
			}

			.import-cus-product-title {
				font-size: 16px;
				color: #fff;
				font-weight: 500;
				margin: 0 15px;
			}

			.import-record-list {
				.dynamic-item {
					background: linear-gradient(to right, rgb(79, 82, 91), rgb(42, 45, 57));
					padding: 10px 15px;
					box-sizing: border-box;
					border-radius: 4px;
					margin-top: 12px;

					.dynamic-item-date-person {
						display: flex;
						align-items: center;
						justify-content: space-between;

						.dynamic-item-date,
						.dynamic-item-person {
							font-size: 12px;
							color: rgba(255, 255, 255, 0.5);
						}
					}

					.dynamic-item-icon-text {
						display: flex;
						align-items: flex-start;
						margin-top: 10px;

						.label-icon {
							width: 20px;
							flex: 0 0 20px;
							font-size: 20px;
							color: #9BE9EC;
						}

						.dynamic-item-text {
							flex: 1;
							margin-left: 5px;
							font-size: 14px;
							color: rgba(255, 255, 255, 0.8);
							margin-top: -2px;
						}
					}
				}
			}
		}
	}
</style>
